<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
      <img class="showimg" :src="collapsed?imgshow:imgsq" @click="toggle(collapsed)">
    <el-submenu index="2" class="submenu">
      <template slot="title"><span>普通用户</span></template>
      <el-menu-item @click="exit()" index="2-1"><span>退出</span></el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'navcon',
  data () {
    return {
      collapsed: false,
      imgshow: require('../../assets/images/show.png'),
      imgsq: require('../../assets/images/sq.png')
    }
  },
  methods: {
    // 退出用户
    exit () {
      sessionStorage.clear()
      this.$router.replace({ path: '/Login' })
    },
    // 切换显示
    toggle (showtype) {
      this.collapsed = !showtype
      this.$root.Bus.$emit('toggle', this.collapsed)
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse)
  border: none
.el-menu.el-menu--horizontal
  border-bottom: 0px
.submenu
 margin-left: 92.1%
span
 color : #fff
.showimg
  width: 26px
  height: 26px
  position: absolute
  top: 17px
  left: 17px
  cursor:pointer
</style>
